<template>
  <!-- 精选题库 -->
  <div class="root">
    <div class="header">
      <div class="add">
        <span class="tip">说明: 目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push({ name: 'questions-new' })"
          >新增试题</el-button
        >
      </div>

      <div class="firstLine">
        <el-row>
          <el-col :span="6">
            <span>
              <i class="subjectTxt">学科</i>
              <el-select
                class="inp"
                filterable
                v-model="searchContent.subjectID"
              >
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i>二级目录</i>
              <el-select class="inp" filterable>
                <el-option></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i>标签</i>
              <el-select class="inp" @keyup.enter="handleFilter" filterable>
                <el-option></el-option>
              </el-select>
            </span>
          </el-col>
          <el-col :span="6">
            <span>
              <i>关键字</i>
              <el-input
                class="inp"
                placeholder="请输入内容"
                v-model="searchContent.keyword"
              ></el-input>
            </span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <span>
              <i>试题类型</i>
              <el-select
                class="inp"
                filterable
                v-model="searchContent.questionType"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i class="difficultyTxt">难度</i>
              <el-select
                class="inp"
                filterable
                v-model="searchContent.difficulty"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i>方向</i>
              <el-select
                class="inp"
                filterable
                v-model="searchContent.direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i>录入人</i>
              <el-select
                class="inp"
                filterable
                v-model="searchContent.creatorID"
              >
                <el-option
                  v-for="item in creatorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <span>
              <i>题目备注</i>
              <el-input
                class="inp"
                placeholder="请输入内容"
                v-model="searchContent.remarks"
              ></el-input>
            </span>
          </el-col>

          <el-col :span="6">
            <span>
              <i>企业简称</i>
              <el-input
                class="inp"
                placeholder="请输入内容"
                v-model="searchContent.shortName"
              ></el-input>
            </span>
          </el-col>

          <el-col :span="6">
            <span class="city">
              <i>城市</i>
              <el-select
                class="cityInp"
                @change="handleProvince"
                filterable
                v-model="searchContent.province"
              >
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>

              <el-select
                class="cityInp"
                filterable
                v-model="searchContent.city"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </span>
          </el-col>

          <el-col :span="6">
            <el-button class="clear" @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

<!-- 标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" ></el-tab-pane>
      <el-tab-pane label="待审核" name="second"></el-tab-pane>
      <el-tab-pane label="已审核" name="third"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
    </el-tabs>
    <!-- 分割 -->
    <div class="record">
      <i class="el-icon-info icon"></i>
      <span class="recordTxt"
        >共 <i class="recordCount">{{ counts }}</i
        >条记录</span
      >
    </div>
    <!-- 记录模块结束 -->

    <!-- 表格模块 -->
    <div class="table">
      <el-table height="400" :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          prop="number"
          label="试题编号"
          width="100"
        >
        </el-table-column>

        <el-table-column align="center" prop="subject" label="学科" width="180">
        </el-table-column>

        <el-table-column align="center" prop="catalog" label="目录">
        </el-table-column>

        <el-table-column align="center" prop="questionType" label="题型">
        </el-table-column>

        <el-table-column align="center" label="题干" prop="question">
        </el-table-column>

        <el-table-column
          align="center"
          prop="addDate"
          label="录入时间"
          width="180"
        >
        </el-table-column>

        <el-table-column align="center" prop="difficulty" label="难度">
        </el-table-column>

        <el-table-column align="center" prop="creator" label="录入人">
        </el-table-column>

        <el-table-column align="center" prop="chkState" label="审核状态">
        </el-table-column>

        <el-table-column align="center" prop="chkRemarks" label="审核意见">
        </el-table-column>

        <el-table-column align="center" prop="chkUser" label="审核人">
        </el-table-column>

        <el-table-column align="center" prop="publishState" label="发布状态">
        </el-table-column>

        <!-- 操作模块 -->
        <el-table-column align="center" label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <div class="operation">
              <!-- 预览 -->
              <button @click="view(row.id)">预览</button>

              <!-- 审核 -->
              <el-button
                @click="check(row.id)"
                :class="{
                  forbid: row.chkState === '已审核' || row.chkState === '已拒绝'
                }"
                :disabled="
                  row.chkState === '已审核' || row.chkState === '已拒绝'
                "
              >
                审核
              </el-button>

              <!-- 修改 -->
              <button
                :class="{ forbid: row.publishState === '已发布' }"
                :disabled="row.publishState === '已发布'"
                @click="modified(row.id)"
              >
                修改
              </button>

              <!-- 上架 -->
              <button @click="grounding(row.id, row.publishState)">
                {{ row.publishState === '已下架' ? '上架' : '下架' }}
              </button>

              <!-- 删除 -->
              <button
                @click="delQuestion(row.id)"
                :class="{ forbid: row.publishState === '已发布' }"
                :disabled="row.publishState === '已发布'"
              >
                删除
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页开始 -->
    <div class="pagination">
      <page-tool
        :total="counts"
        :paginationPage="pageObj.page"
        :paginationPagesize="pageObj.pageSize"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      ></page-tool>
    </div>
    <!-- 分页结束 -->

    <!-- 题目审核 -->
    <el-dialog
      title="题目审核"
      :visible="dialogVisible"
      width="30%"
      @close="closeChk"
    >
      <el-radio-group v-model="chkForm.chkState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>

      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="chkForm.chkRemarks"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 预览 -->
    <!-- <questionView ref="viewDialog"> </questionView> -->
  </div>
</template>

<script>
import { getType } from '../../utils/my'
import { simplee } from '../../api/base/users'
import { simple } from '../../api/hmmm/subjects'
// import questionView from '../components/questions-preview.vue'
import {
  remove,
  choice,
  choiceCheck,
  choicePublish
} from '../../api/hmmm/questions'
import { provinces, citys } from '../../api/hmmm/citys'
import pageTool from '../../module-manage/components/page-tool.vue'
export default {
  components: {
    pageTool
    // questionView
  },
  data () {
    return {
      dialogVisible: false,
      chkForm: {
        id: null,
        chkState: 0,
        chkRemarks: null
      },
      subjectOptions: [],
      questionType: [
        {
          value: 1,
          label: '单选'
        },
        {
          value: 2,
          label: '多选'
        },
        {
          value: 3,
          label: '简答'
        }
      ],
      difficulty: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '一般'
        },
        {
          value: 3,
          label: '困难'
        }
      ],
      creatorList: [],
      direction: [
        {
          value: 1,
          label: 'o2o'
        },
        {
          value: 2,
          label: '外包服务'
        },
        {
          value: 3,
          label: '企业服务'
        },
        {
          value: 4,
          label: '互联网金融'
        },
        {
          value: 5,
          label: '企业咨询'
        },
        {
          value: 6,
          label: '互联网'
        },
        {
          value: 7,
          label: '电子商务'
        }
      ],
      citySelect: {
        province: [],
        cityDate: []
      },
      counts: '',
      pageObj: {
        page: 1,
        pagesize: 10
      },
      tableData: [],
      searchContent: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      }
    }
  },

  methods: {
    async handleClick (tab, event) {
      console.log(tab)
      if (tab.index === '0') {
        this.getChoicenessList()
      } else if (tab.index === '1') {
        const { data } = await choice({ chkState: 0 })
        this.tableData = data.items
        this.counts = data.counts
      } else if (tab.index === '2') {
        const { data } = await choice({ chkState: 1 })
        this.tableData = data.items
        this.counts = data.counts
      } else {
        const { data } = await choice({ chkState: 2 })
        this.tableData = data.items
        this.counts = data.counts
      }
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },

    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },

    // 获取精选题库列表
    async getChoicenessList () {
      const {
        data: { page, pagesize, items, counts }
      } = await choice({
        ...this.pageObj,
        ...this.searchContent
      })
      items.forEach(item => {
        item.question = item.question.replace('<p>', '')
        item.question = item.question.replace('</p>', '')
        item.addDate = `${item.addDate.substr(0, 10)} ${item.addDate.substr(
          11,
          8
        )}`
        getType(item)
      })
      this.tableData = items
      this.counts = counts
      this.pageObj.pagesize = pagesize
      this.pageObj.page = page
    },

    // 上下架
    async grounding (id, state) {
      await choicePublish({
        id: id,
        publishState: state === '已下架' ? '1' : '0'
      })
      this.getChoicenessList()
    },

    modified (id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id: id
        }
      })
    },

    // 搜索
    search () {
      // if (
      //   this.searchContent.difficulty ||
      //   this.searchContent.questionType ||
      //   this.searchContent.tags ||
      //   this.searchContent.province ||
      //   this.searchContent.city ||
      //   this.searchContent.remarks ||
      //   this.searchContent.shortName ||
      //   this.searchContent.direction ||
      //  this.searchContent.catalogID ||
      //  this.searchContent.creatorID
      // ) {
      //   return this.$message.warning('暂不支持此搜索条件')
      // } else {
      //   this.getChoicenessList()
      // }
    },

    closeDialog () {
      this.dialogVisible = false
    },

    openDialog () {
      this.dialogVisible = true
    },

    clearChkContent () {
      this.chkForm.chkState = null
      this.chkForm.chkRemarks = null
    },

    cancel () {
      this.closeChk()
    },

    closeChk () {
      this.closeDialog()
      this.clearChkContent()
    },

    async confirm () {
      await choiceCheck(this.chkForm)
      this.getChoicenessList()
      this.closeChk()
      this.$message.success('审核成功')
    },

    check (id) {
      this.chkForm.id = id
      this.openDialog()
    },

    // 预览
    view (id) {
      console.log('组件没写')
      // this.$refs.viewDialog.viewQuestion(id)
      // this.$refs.viewDialog.openDialog()
    },

    // 删除
    delQuestion (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 点击确定
          await remove({ id })
          this.getChoicenessList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    clear () {
      this.searchContent.subjectID = null
      this.searchContent.difficulty = null
      this.searchContent.questionType = null
      this.searchContent.tags = null
      this.searchContent.province = null
      this.searchContent.keyword = null
      this.searchContent.remarks = null
      this.searchContent.shortName = null
      this.searchContent.direction = null
      this.searchContent.creatorID = null
      this.searchContent.catalogID = null

      this.getChoicenessList()
    },

    // 分页相关
    async pageChange (pageNum) {
      this.pageObj.page = pageNum
      this.getChoicenessList()
    },

    async pageSizeChange (pageSize) {
      this.pageObj.pagesize = pageSize
      this.getChoicenessList()
    }
  },

  async created () {
    this.getCityData()
    this.getChoicenessList()

    //  搜索学科模块
    const { data } = await simple()
    this.subjectOptions = data

    // 录入人
    // const res = await simplee()
    // res.data = JSON.parse(
    //   JSON.stringify(res.data).replace(/username/g, 'label')
    // )
    // res.data = JSON.parse(JSON.stringify(res.data).replace(/id/g, 'value'))
    // this.creatorList = res.data
    // console.log(res.data)
  }
}
</script>

<style scoped lang="less">
.root {
  width: 97%;
  margin: 20px;
  padding: 18px;
  border-radius: 4px;
  background-color: #fff;

  // 头部模块
  .header {
    .add {
      display: flex;
      justify-content: space-between;

      // 新增试题按钮
      /deep/ .el-button--medium {
        font-size: 12px;
      }
      .tip {
        color: #ffc0cb;
        font-size: 12px;
      }
    }
    .inp {
      width: 220px;
    }
  }

  .subjectTxt,
  .difficultyTxt {
    margin-left: 28px;
  }

  .city {
    .cityInp {
      width: 108px;
      margin-right: 6px;
    }
  }

  i {
    font-size: 14px;
    font-weight: 700;
    color: #606266;
    font-style: normal;
    margin-right: 12px;
  }

  /deep/ .el-button {
    margin-top: 14px;
  }

  /deep/ .el-input--medium {
    margin-top: 14px;
  }

  /deep/ .el-button--success {
    margin-right: 43px;
  }

  // 记录模块
  .record {
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    background-color: #f4f4f5;
    margin: 20px 0;

    .icon {
      color: #909399;
      font-size: 16px;
      margin-left: 18px;
    }

    .recordTxt {
      font-size: 13px;
      color: #9093b1;
      margin-left: 24px;
      .recordCount {
        font-size: 13px;
        color: #909399;
        font-style: normal;
        margin-right: 2px;
      }
    }
  }

  .forbid {
    cursor: not-allowed !important;
    color: #dbdde2 !important;
  }

  // 操作按钮
  .operation {
    button {
      font-size: 13px;
      color: #40b6fd;
      cursor: pointer;
      border: none;
      background-color: transparent;
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
